<html>
    <head>
        <script type="text/javascript">
            function createTree(arr) {
                function createNode(index, treeNode) {
                    var value = arr[index];
                    var node = {
                        value: value
                    };
                    if (!treeNode) {
                        treeNode = new RenderTree(value);
                    }
                    if (arr[index * 2 + 1] !== undefined) {
                        treeNode.insertLeft(value);
                        node.left = createNode(index * 2 + 1, treeNode.left);
                    }
                    if (arr[index * 2 + 2] !== undefined) {
                        node.right = createNode(index * 2 + 2, treeNode.right);
                        treeNode.insertRight(value);
                    }
                    return node;
                }
                const tree = new RenderTree(arr[0]);

                const dataNode = createNode(0,tree);

                console.log(tree, dataNode)
            }
            var RenderTree = /** @class */ (function () {
                function RenderTree(value) {
                    this.node = document.createElement('div');
                    this.value = value;
                    this.node.innerHTML = "\n            <div class=\"text-content\">" + value + "</div>\n            <div className=\"child-content\">\n                <div id='left-" + value + "'></div>\n                <div id='right-" + value + "'></div>\n            </div>\n        ";
                }
                RenderTree.prototype.insertRight = function (value) {
                    var tag = document.getElementById("right-" + this.value.toString());
                    var right = new RenderTree(value);
                    this.right = right;
                    tag?.parentElement?.insertBefore(right.node, tag);
                };
                RenderTree.prototype.insertLeft = function (value) {
                    var tag = document.getElementById("left-" + this.value.toString());
                    var left = new RenderTree(value);
                    this.left = left;
                    tag?.parentElement?.insertBefore(left.node, tag);
                };  
                return RenderTree;
            }());
        </script>
        <script type="text/javascript">
            createTree([1,2,3,4,5,6,7,8])
        </script>
    </head>
</html>s